<template>
	<view>
		<swiper>
			<swiper-item v-for="(item, index)  in list " :key="index">
				<view class="item_box">
					<text>{{item.name}}</text>
					<text>{{item.name}}</text>
					<text>{{item.name}}</text>
					<text>{{item.name}}</text>
					<text>{{item.name}}</text>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		name: "b-swiper",
		props: {
			pageSize: {
				type: Number,
				default: 8
			}
		},
		data() {
			return {
				list: [{
					name: '早餐',
					value: '001'
				}, {
					name: '午餐',
					value: '002'
				}, {
					name: '晚餐',
					value: '003'
				}, {
					name: '饮料',
					value: '004'
				}]
			};
		}
	}
</script>

<style lang="scss">

	.item_box {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin: 0 -20upx;
		
		text {
			width: calc(25% - 40upx);
			text-align: center;
			border: 1px $uni-text-color-disable solid ;
			border-radius: 5px;
			padding: 6upx 20upx;
			margin: 10upx 20upx;
		}
	}
</style>
